<template>
    <div class="Authorization">
        <div class="container f-column f-j-around f-a-center" style="height: 7.1rem;">
            <div class="user f-column f-j-around f-a-center"><img src="../../assets/logo.png" alt=""><span>Richard Perez</span></div>
            <div style="font-weight: 600;font-size: 0.36rem;">获取MIU头像、昵称、手机号</div>
            <input type="text" placeholder="填写邀请码、没有可不填">
        </div>
        <div class="container f-column f-a-center" style="padding: 0.4rem 0.2rem 0.6rem 0.2rem">
            <p class="protocol-row f-row f-j-center f-a-center"><gy-check-box v-model="protocolSure"></gy-check-box>我已阅读 <span>《协议》</span>并知悉协议内容</p>
            <div class="submitButton" style="margin-top: 0.2rem;">立即开通</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO} from "@/store/MutationTypes";
import GyCheckBox from "@/components/GyCheckBox.vue";
@Component({
    name: 'Authorization',
    components: {GyCheckBox}
})
export default class extends Vue {
    private protocolSure:boolean = false;
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        // this.$store.dispatch(NAV_BAR_INFO, {
        //     leftItem: {name: '取消', click: () => {
        //
        //         }}
        // })
    }
}
</script>

<style scoped lang="less">
.Authorization {
    padding: 0.2rem 0.3rem;
    & .container {
        background-color: white;
        border-radius: 0.1rem;
        margin-top: 0.2rem;
        & .user {
            & img {
                width: 1.0rem;
                height: 1.0rem;
                border-radius: 1.0rem;
            }
            & span {
                font-size: 0.36rem;
                color: black;
                line-height: 1.2rem;
            }
        }
        & input {
            background-color: #F1F1F1;
            padding: 0.4rem 0;
            width: 6.3rem;
            border: none;
            border-radius: 0.1rem;
            text-align: center;
            margin-bottom: 0.4rem;
        }
        & .protocol-row {
            font-size: 0.24rem;
            color: black;
            text-align: center;
            & span {
                color: #3B83FF;
            }
        }
    }
}
</style>
